<template>
  <div class="china_map">
    <!-- <img src='http://localhost:8080/img/red-flag.54143926.jpg' /> -->
    <div id="china_map" style="width:452px;height:449px;"></div>
  </div>
</template>

<script>
import echarts from "echarts";
require("echarts/map/js/china");
export default {
  data() {
    return {
      data: [
        {
          name: "北京",
          value: 59,
          perf: "0.501s", // 性能
          downloadSpeep: "1.221MB/s", // 下载速度
          usability: "100%", // 可用性
          point: "250", // 监测点
          symbolSize: 20
        },
        {
          name: "上海",
          value: 142
        },
        {
          name: "黑龙江",
          value: 64
        },
        {
          name: "新疆",
          value: 110,
          perf: "0.501s", // 性能
          downloadSpeep: "1.221MB/s", // 下载速度
          usability: "100%", // 可用性
          point: "250" // 监测点
        },
        {
          name: "深圳",
          value: 99
        },
        {
          name: "湖北",
          value: 81
        },
        {
          name: "四川",
          value: 55
        }
      ]
    };
  },
  mounted() {
    // 初始化echarts实例
    this.chinachart = echarts.init(document.getElementById("china_map"));
    // 进行相关配置
    this.chartOption = {
      tooltip: {
        show: true,
        triggerOn: 'mousemove',
        // 鼠标移到图里面的浮动提示框
        // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
        formatter(params, ticket, callback) {
          // params.data 就是series配置项中的data数据遍历
          let localValue, perf, downloadSpeep, usability, point;
          if (params.data) {
            localValue = params.data.value;
            perf = params.data.perf;
            downloadSpeep = params.data.downloadSpeep;
            usability = params.data.usability;
            point = params.data.point;
          } else {
            // 为了防止没有定义数据的时候报错写的
            localValue = 0;
            perf = 0;
            downloadSpeep = 0;
            usability = 0;
            point = 0;
          }
          let htmlStr = `
            <div style='font-size:18px;padding-bottom: 10px'> ${params.name}</div>
            <p style='text-align:left;margin-top:-10px;'>
              区域对应数据value：${localValue}<br/>
              性能perf：${perf}<br/>
              下载速度downloadSpeep：${downloadSpeep}<br/>
              可用性usability：${usability}<br/>
              监测点数point：${point}<br/>
            </p>
          `;
          return htmlStr;
          // console.log(params);
          // console.log(ticket);
        },
        backgroundColor: "#ff7f50", //提示标签背景颜色
        textStyle: { color: "#fff" } //提示标签字体颜色
      },
      // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
      visualMap: {
        // 左下角的颜色区域
        type: "piecewise", // 定义为分段型 visualMap
        min: 0,
        max: 1000,
        itemWidth: 20,
        bottom: 20,
        left: 20,
        pieces: [
          // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
          { gt: 150, lte: Infinity, label: "150万以上", color: "#FCAF14" }, // (150, Infinity]
          { gt: 100, lte: 150, label: "100-150万", color: "#3DCF9A" }, // (100, 150]
          { gt: 50, lte: 100, label: "50-100万", color: "#6BCBCA" }, // (50, 100]
          { value: 0, label: "0-50万", color: "#A3E4E3" } // [0]
        ]
      },
      // geo配置详解： https://echarts.baidu.com/option.html#geo
      geo: {
        // 地理坐标系组件用于地图的绘制
        map: "china", // 表示中国地图
        // roam: true, // 是否开启鼠标缩放和平移漫游
        zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
        label: {
          show: true
        },
        itemStyle: {
          // 地图区域的多边形 图形样式。
          // borderColor: 'rgba(0, 0, 0, 0.2)',
          borderColor: "#ffffff",
          emphasis: {
            // 高亮状态下的多边形和标签样式
            shadowBlur: 20,
            // shadowColor: 'rgba(0, 0, 0, 0.5)'
            shadowColor: "rgba(254, 176, 0, 1)"
          }
        }
      },
      series: [
        {
          name: "旗子", // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
          type: "custom",
          coordinateSystem: 'geo',
          // geoIndex: 0,
          label: {
            show: false
          },
          renderItem: (params, api) => {
            //具体实现自定义图标的方法
            // console.log(params,api);
            // console.log(123,api.coord([39.027576,115.311571]),api.coord([115.311571,39.027576]));
            return {
              type: "image",
              width: 20,
              height: 20,
              origin: [0,0],
              style: {
                image: require('./red-flag.jpg'),
                width: 20,
                height: 20,
                x: api.coord([115.311571,39.027576])[0],
                y: api.coord([115.311571,39.027576])[1]
              }
            };
          },
          // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接（下面是我定义的假数据）
          data: this.data
        },
        // {
        //   type: "scatter",
        //   coordinateSystem: "geo",
        //   data: this.data,
        //   showAllSymbol: true,
        //   symbolSize: 20,
        //   symbol: 'image://http://localhost:8080/img/red-flag.54143926.jpg',
        //   symbolRotate: 35,
        // },
      ]
    };
    // 使用刚指定的配置项和数据显示地图数据
    this.chinachart.setOption(this.chartOption);
  }
};
</script>

<style>
</style>